<template>
    <!-- 单位充值 -->
    <div style="padding: 40px 70px;">
        <h4 class="h4Class">终端入库</h4>
        <a-tabs defaultActiveKey="1"  >
            <a-tab-pane tab="手动添加" key="1">
                <a-form @submit="handleInput" :form="orgform">
                    <div style="margin-top:20px;">
                        <a-form-item style="margin-bottom: 20px;" label="合作机构号" v-bind="formItemLayout">
                            <a-input disabled v-model="agentCode"></a-input>
                        </a-form-item>
                        <a-form-item label="合作机构名称" v-bind="formItemLayout">
                            <a-input disabled v-model="agentName" ></a-input>
                        </a-form-item>
                        <a-form-item label="SN设备号" v-bind="formItemLayout">
                            <a-input 
                            v-decorator="[
                    'sncode',
                    {rules: [{ required: true, message: '请输入SN设备号' }]}
                  ]"  placeholder="请填写SN设备号"></a-input>
                        </a-form-item>
                        <a-form-item v-bind="formItemLayout" label="终端类型">
                            <div>
                                <a-select class="width-sty" v-decorator="[
                    'Terminaltype',
                    {rules: [{ required: true, message: '请选择终端类型' }]}
                  ]" placeholder="请选择终端类型" >
                                    <a-select-option v-for="d in seloptions" :key="d.value">{{d.label}}
                                    </a-select-option>
                                </a-select>
                            </div>
                        </a-form-item>
                        <a-form-item v-bind="formItemLayout" label="终端品牌">
                        <a-select
                            showSearch
                            :allowClear="true"
                            placeholder="终端品牌"
                            v-model="query.factoryCode"
                        >
                            <a-select-option v-for="d in terminalFactoryDTOList" @click="getfactoryName(d.factoryName,d.terminalModelList)" :key="d.factoryCode">{{d.factoryName}}
                                                    </a-select-option>
                        </a-select>
                        </a-form-item>
                        <a-form-item v-bind="formItemLayout" label="终端型号">
                        <a-select
                            showSearch
                            :allowClear="true"
                            placeholder="终端型号"
                            v-model="query.modelName"
                        >
                        <a-select-option v-for="d in terminalModelList" @click="getmodelCode(d.modelCode)" :key="d.modelCode">{{d.modelName}}
                                                    </a-select-option>
                        </a-select>
                        </a-form-item>
                        <a-form-item>
                            <a-row>
                                <a-col :span="9"></a-col>
                                <a-col :sm="{ span:10,offset:1}">
                                    <a-button style="width:110px;" type="primary" html-type="submit">确认</a-button>
                                </a-col>
                            </a-row>
                        </a-form-item>
                    </div>
                </a-form>
            </a-tab-pane>
            <a-tab-pane tab="批量导入" key="2" forceRender>
                <a-form class="a_form_sty" @submit="handleInput2" :form="bankform">
                    <a-form-item style="margin-bottom:3vh;" label='上传文件' required v-bind="formItemLayout">
                        <!-- <a-row>
                            <a-col :span='10'> -->
                        <a-upload name="upfile"  :headers="henderstoken" :fileList="fileList" action="/file/file/upload" :data="{to}"
                            @change="handleChange">
                            <a-button v-if="fileList.length<1">
                                <a-icon type="upload" /> 点击上传
                            </a-button>
                        </a-upload>
                        <!-- </a-col>
                        </a-row> -->
                        <a-row>
                            <a-col :span='10'>
                                <a href="http://192.168.16.203/attach/终端批量入库模板.xlsx" download="终端批量入库模板.xlsx"
                                    target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;模板下载</a>
                            </a-col>
                        </a-row>
                    </a-form-item>
                    <a-row>
                        <a-col :span="9"></a-col>
                        <a-col :sm="{ span:10,offset:1}">
                            <a-button style="width:110px;margin-top:1vh;"  html-type="submit" type="primary"
                                >确定
                            </a-button>
                        </a-col>
                    </a-row>
                </a-form>
            </a-tab-pane>
        </a-tabs>
        <a-modal style="top: 250px;" @ok="handleOk" @cancel="handleCancel" :visible="modalVisible" :footer="null">
            <div class="modalClass">
                <h4>添加成功！</h4>
                <div class="footClass">
                    <a-button class="btnClass" type="primary" @click="goterminalquery">确定</a-button>
                    <a-button class="btnClass" type="primary" @click="handleCancel">继续添加</a-button>
                </div>
            </div>
        </a-modal>
        <a-modal style="top: 250px;" @ok="handleOk2" @cancel="handleCancelRelieve" :visible="RelieveVisible"
            :footer="null">
            <div class="modalClass">
                <h4 v-if="iserror">上传成功</h4>
                <h4 v-if="!iserror">上传失败</h4>
                <div v-if="!iserror">{{errordata}}</div>
                <div class="footClass">
                    <a-button v-if="iserror" class="btnClass" type="primary" @click="goterminalquery">确认</a-button>
                    <a-button class="btnClass" type="primary" @click="handleCancelRelieve">
                       <span v-if="iserror">继续添加</span>
                       <span v-if="!iserror">确定</span>
                        </a-button>
                </div>
            </div>
        </a-modal>
       
    </div>
</template>
<script>
import moment from "moment";
import { mapState } from "vuex";
    export default {
        data() {
            return {
                orgform: this.$form.createForm(this),
                bankform: this.$form.createForm(this),
                errordata: "",
                size: "middle",
                errordata:"",
                iserror:false,
                fileList:[],
                filePath:"",
                fileName:"",
                fileType:"",
                factoryName: "",
                fileHostAddr: localStorage.getItem("fileHostAddr"),
                modalVisible: false,
                RelieveVisible: false,
                query: {
                    factoryCode: null,
                    modelName: null,
                    modelCode: null,
                },
                 henderstoken: {
        Authorization: localStorage.getItem("token"),
      },
      to:sessionStorage.getItem("memberNo") + "_" + sessionStorage.getItem("username"),
                formItemLayout: {
                    labelCol: {
                        xs: { span: 24 },
                        sm: { span: 5 }
                    },
                    wrapperCol: {
                        xs: { span: 24 },
                        sm: { span: 12, offset: 1 },
                        md: { span: 12, offset: 1 }
                    }
                },
                agentCode:"",
                agentName:"",
                factoryName:"",
                seloptions:[{label:"电签pos",value:"minipos"},{label:"mpos",value:"mpos"}],
                terminalFactoryDTOList:[],
                terminalModelList:[],
               
            };
        },
        mounted() {
            this.getInfoQuery();
            // console.log(this.fileHostAddr)
        },
        computed: {
    ...mapState({
      imageSize: state => state.imageSize
    })
  },
        methods: {
            handleOk(e) {
                this.modalVisible = false;
            },
            handleCancel(e) {
                this.modalVisible = false;
            },
            handleOk2(e) {
                this.RelieveVisible = false;
            },
            handleCancelRelieve(e) {
                this.RelieveVisible = false;
            },
            handleChange({ file, fileList }) {
            let pos = file.name.lastIndexOf(".");
            let lastName = file.name.substring(pos, file.name.length);
            let supportTypes = [".xls", ".xlsx"];
            if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
                this.$message.error("上传图片仅支持 xls、 xlsx 2种格式！");
                return;
            }
            if (file.size / (1024 * 1024) > this.imageSize) {
                this.$message.error(`上传图片大小应小于${this.imageSize}Mb！`);
                return;
            }
            this.fileList = fileList;
            // console.log(this.fileList);
            let obj = fileList.length > 0 ? fileList[0] : { response: { data: null, code: null } };
            if (obj) {
                    let thisfileName = obj.name
                    
                    this.fileName = thisfileName.split(".")[0];
                    this.fileType = thisfileName.split(".")[1];

                    if (obj.response) {
                        if (obj.response.code == 'OK') {
                            // console.log(obj.response.data);
                            this.filePath = obj.response.data;
                        }
                    }
                }
            },
            getInfoQuery(){
                this.$axios.get("/agent/sncode/addInfoQuery").then(res => {
                    console.log(res);
                    if(res.data.code == "OK"){
                        this.agentCode = res.data.data.agentCode
                        this.agentName = res.data.data.agentName
                        this.terminalFactoryDTOList = res.data.data.terminalFactoryDTOList
                    }
                });
            },
            getfactoryName(name,list){
                this.factoryName = name
                this.terminalModelList = list
                console.log(this.factoryName)
            },
    getmodelCode(name){
                this.query.modelCode = name
            },
           handleInput(e) {
                e.preventDefault();
                this.orgform.validateFields((err, values) => {
                    console.log(values);
                    if (!err) {
                        this.$axios.post("/agent/sncode/manualSave",{ 
                            sncode:values.sncode, 
                            factoryCode:this.query.factoryCode, 
                            factoryName:this.factoryName,
                            modelCode:this.query.modelCode,
                            modelName:this.query.modelName, 
                            type:values.Terminaltype 
                        }).then(res => {
                        console.log(res);
                        if(res.data.code == "OK"){
                            this.modalVisible = true
                        }else{
                            this.$message.error(res.data.message)
                        }
                         });
                    }
                })
            },
           handleInput2(e) {
                e.preventDefault();
                this.bankform.validateFields((err, values) => {
                    
                    
                    console.log(this.filePath);
                    console.log(this.fileName);
                    console.log(this.fileType);

                    
                    //this.fileHostAddr
                    if (!err) {
                        this.$axios.post("/agent/sncode/importData",{ 
                            filePath:this.filePath, 
                            fileName:this.fileName, 
                            fileType:this.fileType 
                            }).then(res => {
                        console.log(res);
                        if(res.data.code == "OK"){
                            this.iserror = true
                            this.RelieveVisible = true
                        }else{
                            this.iserror = false
                            this.RelieveVisible = true
                            this.errordata = res.data.message
                        }
                         });
                    }
                })
            },
            goterminalquery(){
               this.$router.push({ path: "/Terminal/terminalQuery" });
            }
        }
    };
</script>


<style scoped lang='less'>
    .bankimg {
        height: 38px;
    }

    .radio_card {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    ul {
        padding-left: 0;
    }

    .li_radio_style {
        list-style: none;
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 2px 10px;
        /* display: flex;
      align-items: center; */
        margin-bottom: 10px;
        width: 100%;
        overflow: hidden;
    }

    .bank_img {
        display: flex;
        align-items: center;
        float: left;
        height: 39px;
    }

    .li_radio_style img {
        width: 25px;
        height: 25px;
        vertical-align: middle;
        margin: 0 1%;
        float: left;
    }

    .li_radio_style .bank_info {
        float: left;
        margin-left: 2%;
    }

    .li_radio_style i {
        color: #153056;
        margin-right: 2%;
        float: right;
        font-stretch: normal;
    }

    .addBank {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: -15px;
    }

    #addBank {
        border: 1px solid #bbb;
        border-radius: 5px;
        text-align: center;
        padding: 0px 10px;
        width: 50%;
    }

    .tooltip_sty {
        margin-left: 20px;
        color: #3b9fe2;
        padding: 0 15px;
        font-size: 12px;
        display: flex;
        align-items: center;
        background-color: #f5fcff;
        border: 1px solid #3b9fe2;
        border-radius: 4px;
        position: relative;
        line-height: 30px;
    }

    .tooltip_sty:before {
        content: "";
        position: absolute;
        left: -17px;
        top: 50%;
        margin-top: -8px;
        border: 8px solid transparent;
        border-right-color: #3b9fe2;
    }

    .tooltip_sty:after {
        content: "";
        position: absolute;
        left: -15px;
        top: 50%;
        margin-top: -8px;
        border: 8px solid transparent;
        border-right-color: white;
    }

    .ant-tooltip-inner {
        border: 1px solid #153056;
        color: #153056;
        background-color: transparent !important;
    }

    .cash_out {
        display: flex;
        align-items: center;
        /* width: 600px; */
    }

    .cash_out input {
        width: 35%;
    }

    .ant-radio-button-wrapper {
        padding: 0;
    }

    .ant-tabs-nav .ant-tabs-tab {
        font-size: 20px;
    }

    .modalClass {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding-top: 40px;
        padding-bottom: 20px;
    }

    .modalClass h4 {
        font-size: 22px;
        font-weight: 400;
        margin-top: 15px;
        margin-bottom: 25px;
    }

    .modalClass p {
        margin-bottom: 10px;
    }

    .footClass {
        width: 60%;
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
    }

    .a_form_sty {
        width: 100%;
        margin-top: 40px;
    }

    .copy_content {
        font-size: 17px;
        font-weight: 500;
        color: #000;
        float: left;
    }

    .copy_a {
        float: right;
        color: #0772be;
        margin-right: 15px;
    }

    .ant-form-explain {
        font-size: 12px;
        margin-top: 10px;
    }

    .radioButton {
        margin-left: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 140px;
        height: 45px !important;
    }

    .over_hidden {
        overflow: hidden;
    }

    /*滚动条样式*/
    #bankDiv::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 4px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
    }

    #bankDiv::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
    }

    #bankDiv::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);
    }

    .width-sty {
        width: 50%;
    }

    .h4Class {
        font-size: 20px;
    }
</style>